<template>
  <el-header>
    <el-menu 
      mode="horizontal" 
      router 
      :default-active="activeIndex" 
      background-color="#545c64" 
      text-color="#fff" 
      active-text-color="#ffd04b"
      class="nav-menu"
    >
      <div class="nav-left">
        <el-menu-item index="/menu">
          <i class="el-icon-menu"></i>
          <span class="nav-text">菜单</span>
        </el-menu-item>
        <el-menu-item index="/drinks">
          <i class="el-icon-goblet"></i>
          <span class="nav-text">酒水</span>
        </el-menu-item>
         <!-- 数据分析作为顶层菜单 -->
        <el-menu-item index="/line-chart">
          <i class="el-icon-download"></i>
          <span class="nav-text">数据分析</span>
        </el-menu-item>
        <el-menu-item index="/recommend">
          <i class="el-icon-star-on"></i>
          <span class="nav-text">推荐</span>
        </el-menu-item>
      </div>
      <div class="nav-right">
        <el-menu-item index="/cart">
          <i class="el-icon-shopping-cart-2"></i>
          <span class="nav-text">购物车</span>
          <el-badge :value="cartItemCount" v-if="cartItemCount > 0" class="cart-badge"/>
        </el-menu-item>
        <el-menu-item index="/profile">
          <i class="el-icon-user"></i>
          <span class="nav-text">{{ username }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </el-header>
</template>

<script>
export default {
  computed: {
    activeIndex() {
      return this.$route.path
    },
    cartItemCount() {
      return this.$store.state.cartItems.length
    },
    username() {
      return this.$store.state.user ? this.$store.state.user.username : '个人中心'
    }
  }
}
</script>

<style scoped>
.el-header {
  padding: 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  background: rgba(26, 28, 32, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.el-menu {
  border-bottom: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.nav-menu {
  max-width: 1200px;
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  background: transparent !important;
}
.nav-left, .nav-right {
  display: flex;
  align-items: center;
}
.el-menu-item {
  height: 60px;
  line-height: 60px;
  padding: 0 25px;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}
.nav-text {
  margin-left: 5px;
  font-weight: 500;
}
.cart-badge {
  margin-left: 5px;
  transform: scale(0.9);
  transition: transform 0.3s;
}
.cart-badge:hover {
  transform: scale(1);
}
.el-menu-item i {
  font-size: 18px;
  margin-right: 3px;
}
.el-menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #409EFF, #36D1DC);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.el-menu-item:hover::before {
  opacity: 0.1;
}
.el-menu-item.is-active::before {
  opacity: 0.2;
}
@media screen and (max-width: 768px) {
  .nav-menu {
    padding: 0 10px;
  }
  .el-menu-item {
    padding: 0 15px;
  }
  .nav-text {
    font-size: 14px;
  }
}
</style> 